<template>
  <!-- 标题 -->
  <van-nav-bar title="购物车" fixed placeholder />
  <!-- 列表 -->
  <div id="box">
    <van-card
      v-for="(item, index) in cartArr"
      :key="item.product.proid"
      :num="item.product.num"
      :price="item.price"
      :title="item.product.name"
      :thumb="item.product.coverImage"
    >
      <template #tags>
        <van-tag plain type="primary">爆款</van-tag>
        <van-tag plain type="primary">热卖</van-tag>
      </template>
      <template #footer>
        <van-stepper v-model="item.num" @change="cartNumChangeFn(item)" />
        <van-button size="normal" @click="delFn(item.id)" type="danger">删除</van-button>
        <van-checkbox v-model="item.flag" @change="cartSelectOnFn(item)">复选框</van-checkbox>
      </template>
    </van-card>
  </div>

  <!-- 底部全选 -->
  <van-submit-bar :price="countPrice" button-text="提交订单">
    <!-- 用的是点击事件，如果用change事件，会触发watchEffect监听 -->
    <van-checkbox v-model="allChecked" @click="selectAllChange">全选</van-checkbox>
    <!-- <template #tip> 你的收货地址不支持配送<span >修改地址</span> </template> -->
  </van-submit-bar>
</template>

<script setup>
import { watchEffect } from "vue"
import { loadCartList, cartArr } from "@/stores/cartlist"
import { dellist } from "@/api/cartlist"

// **组件加载时获取购物车数据**
loadCartList()

// **监听购物车数据变化，确保自动更新**
watchEffect(() => {
  console.log("购物车最新数据:", cartArr.value)
})

// 单删
async function delFn(id) {
  let token = localStorage.getItem("user-token")
  let r = await dellist(id, token)
  console.log(r.data)
  loadCartList() // 数据刷新 --- 用这个 是因为里面有个 购物车为0时 里面为空  要不然报错
}

//修改购物车数量
function cartNumChangeFn(item) {
  console.log(item)
  //   --------- 没接口 ---------
  //   cartUpdateNumReq(item.cartid, item.num).then((r) => {
  //     console.log(r.data);
  //     //删除成功-刷新列表
  //     loadCartList();
  //   });
}
</script>

<style lang="css" scoped>
.van-submit-bar {
  bottom: 50px;
}
#box {
  margin-bottom: 50px;
}
</style>
